<html>
<head>
	<title></title>
	<head>
		<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>				
		<script type="text/javascript" src="scripts/local-storage-extensions.js"></script>	
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>	
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

	</head>
</head>
<body>
	<p>Date: <input type="text" id="datePicker" /></p>
	<p>Sum: <input type="text" id="sum" /></p>
	<p>Purchase: <input type="text" id="purchase" /></p>
	<button id="addGroceries">Add Groceries</button>
	<p>
		<span id="test"></span>
	</p>
	<script type="text/javascript">

		  $(function() {
		    $( "#datePicker" ).datepicker();
		  });



		 var Utilities = {
		 	electricity:[
		 		{date: "07/03/2013", sum: 74.36},
		 		{date: "03/04/2013", sum: 64.28},
		 		{date: "10/05/2013", sum: 56.59},
		 	],
		 	water:[
		 		{date: "07/03/2013", sum: 25.36},
		 		{date: "03/04/2013", sum: 23.28},
		 		{date: "10/05/2013", sum: 19.59},
		 	],
		 	foodAndGroceries:[
		 		{date: "12/03/2013", sum: 19.56, purchase:"bread, pork, cheese, milk, butter, cookies"},
		 		{date: "15/03/2013", sum: 9.56, purchase:"beers"},
		 		{date: "18/03/2013", sum: 20.56, purchase:"cigarettes, beers"},
		 		{date: "01/04/2013", sum: 19.56, purchase:"subway sandwich"},
		 	],
		 };

		 var Entertainment = {
		 	restaurants:[
		 		{date: "05/04/2013", sum: 95.00, restaurant: "Gusto", meal: ""},
		 		{date: "16/04/2013", sum: 115.00, restaurant: "Ditter", meal: ""},
		 	],

		 	discos:[
		 		{date: "19/04/2013", sum: 215.00, disco: "Night Flight", meal: "bottle Jack Daniels, Energy Drings, nuts"},
		 		{date: "28/04/2013", sum: 89.00, disco: "Plazza", meal: "bottle Red Label JW, Energy Drings"},
		 	],

		 }

		 // localStorage.setObject("utilities", Utilities);
		 // localStorage.setObject("entertainment", Entertainment);

		  

		 $("#addGroceries").bind('click', function(){
		 	var date = $("#datePicker").val();
		 	var sum = $("#sum").val();
		 	var purchase = $("#purchase").val();

		 	var bill = {
		 		date: date,
		 		sum: Number(sum),
		 		purchase: purchase
		 	}

			 var utilities = localStorage.getObject("utilities");

		 	 utilities.foodAndGroceries.push(bill);
		 	 localStorage.setObject("utilities", utilities);
		 	 location.reload();

		 });

		 var utilities = localStorage.getObject("utilities");
		 var entertainment = localStorage.getObject("entertainment");

		 // get total sum of food and groceries from local storage

		 var totalGroceriesSum = 0;
		 for (var i = 0; i < utilities.foodAndGroceries.length; i++) {
		 	totalGroceriesSum += utilities.foodAndGroceries[i].sum;
		 };

		 $("#test").text("Total sum: $" + totalGroceriesSum.toFixed(2));
 

		  

		 console.log("------------  All objects from localstorage / utilities / foodAndGroceries ----------")
		 console.log("--------- Try to add an object -----------");
		 for (var i = 0; i < utilities.foodAndGroceries.length; i++) {
		 	console.log(utilities.foodAndGroceries[i]);
		 };
		 console.log("--------------------");

		 var searchedMonth = 04;

		 for (var i = 0; i < utilities.electricity.length; i++) {
		 	if (getMonth(utilities.electricity[i].date) == searchedMonth) {
		 		console.log("electricity in April: $" + utilities.electricity[i].sum);
		 	};
		 };

		 function getMonth (date) {
		 	var separated = date.split('/');
		 	return separated[1];
		 }

		 function getYear (date) {
		 	var separated = date.split('/');
		 	return separated[2];
		 }


		 function getGroceriesSum(month, year){
		 	var object = utilities.foodAndGroceries;
		 	var totalSum = 0;
		 	for (var i = 0; i < object.length; i++) {
		 		if (getMonth(object[i].date) == month &&
		 			getYear(object[i].date) == year) {
		 			totalSum += object[i].sum;
		 		};
		 	};
		 	return totalSum;
		 }

		 console.log(getGroceriesSum(03, 2013));
		   

 
	</script>
</body>
</html>